<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
			<link rel="stylesheet" href="js/layui/css/layui.css">
			<link rel="stylesheet" href="css/layui-theme-custom.css" />
			<link rel="stylesheet" href="css/mytest.css" />
			<link rel="stylesheet" href="css/note_list.css" />
			<script type="text/javascript" src="js/vue.min.js"></script>
			<script type="text/javascript" src="js/axios.min.js"></script>
	</head>

	<body>
			<div class="body_left">
			<div class="right_top">
				<i class="iconfont icon-fanhui" style="font-size: 34px ;line-height: 56px;float: left; margin-left: 20px; color: #DFE2E8;"></i>
				<div class="search layui-btn-radius">
					<i class="iconfont icon-sousuo" style="float: left;margin-left: 5px;color: #DFE2E8;"></i>
					<input type="text" name="title" required lay-verify="required" placeholder="搜索..." autocomplete="off" class="searchinput">
				</div>
				<i class="iconfont icon-icon-" style="float: right; margin-right: 20px;color: #DFE2E8;"></i>
			</div>
		<ul id="notes">
			<li v-for="(note,index) in info.data" :id="forId(index)" class="test1">
				<div class="welcome">
					<div class="test" :id="forDivId(index)" hidden="hidden">
						<ul>
							<li>{{note.id}}</li>
							<li>加星</li>
							<li>置顶</li>
							<li>复制</li>
							<li>删除</li>
						</ul>
					</div>
					<div class="noteid" hidden="hidden">{{note.id}}</div>
					<div style="height: 20px;"></div>
					<div class="Ntop"><img class="noteimg" :src="note.icon" width="16px" height="16px" /><span class="Ntitle">{{note.notesName}}</span>
						<div class="noteType" hidden="hidden">{{note.type}}</div>
						<span class="images">
											<img src="img/star1.png" onMouseOver="this.src='img/star2.png'" onMouseOut="this.src='img/star1.png'" height="14px" width="14px" class="star"/>
											<img src= "img/share1.png" onMouseOver="this.src='img/share2.png'" onMouseOut="this.src='img/share1.png'" height="26px" width="26px" class="share"/>
											<img src="img/down1.png" v-if="note.type=='0'" onMouseOver="this.src='img/down2.png'" onMouseOut="this.src='img/down1.png'" height="19px" width="19px" class="down"/>
											<img src="img/delete1.png" onMouseOver="this.src='img/delete2.png'" onMouseOut="this.src='img/delete1.png'" height="21px" width="21px" class="delete"/>
										</span>
					</div>
					<div class="content" v-if="note.content!=null">{{note.content}}</div>
					<div class="Nbottom"><span>{{note.updateTime}}</span><span class="kb">{{note.size}}KB</span></div>
				</div>
			</li>

		</ul>
		</div>
		<!--右侧-->
		<div class="body_right"></div>
		<script src="js/layui/layui.js"></script>
		<script src="js/jquery-3.4.1.js"></script>
		<script>
			//JavaScript代码区域
			layui.use(['element', 'layer'],
				function() {
					var element = layui.element;
					var $ = layui.$;
					var layer = layui.layer; /*点击事件*/
					var token=sessionStorage.getItem("accessToken");
					var labelName = sessionStorage.getItem('labelName');
					/*点击事件*/
					$('body').on('click', '.welcome', function(e) {
						var noteName = $(this).find('.Ntitle').text();//
						var content = $(this).find('.content').text();//点击的内容
						sessionStorage.setItem('noteName',noteName);//add.html
						sessionStorage.setItem('content',content);//add.html
						$('.body_right').load('label/addPage');
							$.ajax({
								url: "http://338de254.cpolar.io/note_label/label/byNoteGetLabels",//通过笔记找到相应的标签
								type: "post",
								data: {
									notesName: noteName,
									token:token
								},
								success: function(data) {
									var labels = JSON.stringify(data);
									sessionStorage.setItem('labels',labels);//add.html
								}
						});
					});
					/*笔记列表*/
					new Vue({
						el: '#notes', //绑定
						data() { //数据
							return {
								info: []
							}
						},
						mounted() { //直接执行
							var queParams = {
								labelName: labelName,
								token: token
		                    }
							axios.post('http://338de254.cpolar.io/note_label/label/byLabelGetNote', $.param(queParams))
								.then(response => (this.info = response))
								.catch(function(error) { // 请求失败处理
									console.log(error);
								});
						},
						methods: {
							forId: function(index) {
								return "welcome" + index
							},
							forDivId: function(index) {
								return "rightClick" + index
							},
						}
					});
					
				});
		</script>
	</body>

</html>